<template>
	<text class="warning-color fb">{{formattedTime}}</text>
  <!-- <div>
  {{ formattedTime }}</div> -->
</template>

<script>
export default {
  props: ['endTimestamp'],
  data() {
    return {
      remainingTime: 0,
      timer: null
    }
  },
  computed: {
    formattedTime() {
		if (this.remainingTime <= 0) return this.$t('end');
      const seconds = Math.floor(this.remainingTime / 1000 % 60).toString().padStart(2,'0')
      const minutes = Math.floor(this.remainingTime / 1000 / 60 % 60).toString().padStart(2,'0')
      const hours = Math.floor(this.remainingTime / 1000 / 60 / 60 % 24).toString().padStart(2,'0')
      const days = Math.floor(this.remainingTime / 1000 / 60 / 60 / 24);
	  if(days>0){
		  return `${days} ${hours}:${minutes}:${seconds}`;
	  }
	  if(Number(hours)>0){
		  return `${hours}:${minutes}:${seconds}`;
	  }
	  return `${minutes}:${seconds}`;
    }
  },
  mounted() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    updateTime() {
      const now = Date.now();
      this.remainingTime = Math.max(0, this.endTimestamp - now);
      if (this.remainingTime <= 0) clearInterval(this.timer);
    }
  }
}
</script>
